<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、实时总人口</div>
<div id="table0-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<div id="myecharts0" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 实时人口数量及分布情况</div>
<script>
    (function () {

        $(document).ready(function(){
            // 实时总人口
            $("#table0-desc").text("截至目前省内实时人口总数为${realTimeUserTotal}人，各区域内的实时人口数量及分布情况如下表所示，")
            // var mapData0 = [{pubArea: "琼中", pubCount: 100}, {pubArea: "保亭", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
            var mapData0 = ${realTimeUser}
            var mapEcharts0=echarts.init(document.getElementById('myecharts0'));
            var outdata0 = $.map(mapData0, function(n, i){
                return {
                    name: n.area,
                    value: n.count
                }
            });
            var option0 = getOptionMap(outdata0);
            echarts.registerMap('hainan', hainan);
            mapEcharts0.setOption(option0);
        });
        function getOptionMap(outdata, map) {
            var mapType = map?map:'hainan'
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
                        } else {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;'
                        }
                    },
                },
                visualMap: {
                    min: 0,
                    max: ${realTimeUserMax},
                    itemWidth: 10,
                    itemHeight: 89,
                    orient: 'horizontal',
                    left: '50',
                    top: '0',
                    text: ['密', '疏'],
                    textStyle: {
                        color: '#666666',
                        fontSize: 13,
                    },
                    inRange: {
                        color: ['#FFFFFF','#ADFF2F','#ADFF2F','#FFA500','#FF4500','#FF0000'],//['#D9EEFF', '#2F9BFF'],
                    },
                    outOfRange: {
                        show: false,
                    },
                },
                geo: {
                    map: mapType,
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        },
                    },
                },
                series: [
                    {
                        type: 'map',
                        map: mapType,
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return '{name|' + para.name + '}'
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: '#333333',
                                        align: 'center',
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: '#333333',
                                        align: 'center',
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: '#333333',
                                show: mapType==='hainan'?true:false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#D9EEFF',
                                borderColor: mapType==='hainan'?'#ffffff':'#5bacee',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: '#FFAE00',
                            },
                        },
                        data: outdata,
                        nameMap: mapType==='hainan'?
                            {
                                海口: "海口市",
                                三亚: "三亚市",
                                儋州: "儋州市",
                                五指山: "五指山市",
                                琼海: "琼海市",
                                文昌: "文昌市",
                                万宁: "万宁市",
                                东方: "东方市",
                                定安: "定安县",
                                屯昌: "屯昌县",
                                澄迈: "澄迈县",
                                临高: "临高县",
                                白沙: "白沙黎族自治县",
                                昌江: "昌江黎族自治县",
                                乐东: "乐东黎族自治县",
                                陵水: "陵水黎族自治县",
                                保亭: "保亭黎族苗族自治县",
                                琼中: "琼中黎族苗族自治县",
                                南海诸岛: "三沙市",
                            } : worldNameMap
                    },
                ],
            }
            return option
        }
    })()
</script>